<script setup>
import { ref } from 'vue';
import index from './pages/index.vue';
import mapEditor from './pages/mapEditor.vue';
import mapPreview from './pages/mapPreview.vue';
import Game from './pages/Game.vue';
import instructions from './pages/instructions.vue';
import Rank from './pages/Rank.vue';

const page = ref("index")

const pages = {
    index,
    mapEditor,
    mapPreview,
    Game,
    instructions,
    Rank
}

const hash = window.location.hash.slice(1) || "index"
page.value = hash

window.addEventListener("hashchange",()=>{
    const hash = window.location.hash.slice(1) || "index"
    page.value = hash
})
</script>

<template>
    <component :is="pages[page]"></component>
</template>

<style scoped>
</style>
